<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顺为科技门户网站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Source Han Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
            color: #333;
            line-height: 1.6;
            font-size: 16px;
        }

        /* 顶部导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 50px;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #003366;
        }

        .nav-menu {
            display: flex;
            list-style: none;
        }

        .nav-menu li {
            margin: 0 15px;
        }

        .nav-menu a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-menu a:hover {
            color: #0066cc;
        }

        .nav-menu a.active {
            color: #0066cc;
            font-weight: bold;
        }

        /*.nav-menu a.languagecontroller {*/
        /*    display: none;*/
        /*}*/
        .language-switch {
            margin-left: 20px;
            font-weight: 500;
            cursor: pointer;
        }

        /* 主视觉区 */
        .hero {
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        /* 轮播图容器 */
        .slider-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .slide.active {
            opacity: 1;
        }

        .slide::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        #dynamicBackground {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* 视差图层 */
        .parallax-layer {
            position: absolute;
            top: -50px;
            left: -50px;
            width: calc(100% + 100px);
            height: calc(100% + 100px);
            background-size: cover;
            background-position: center;
            transform: translate(0, 0);
            transition: transform 0.1s ease-out;
            will-change: transform;
        }

        .parallax-bg {
            z-index: 1;
        }

        .parallax-fg {
            z-index: 2;
            opacity: 0.7;
        }

        /* 轮播导航点 */
        .slider-dots {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 10;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .dot.active {
            background: white;
        }

        /* 轮播箭头 */
        .slider-arrows {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            z-index: 10;
            padding: 0 20px;
            pointer-events: none; /* 让箭头不阻挡鼠标事件 */
        }

        .arrow {
            background: rgba(0, 0, 0, 0.3);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background 0.3s ease;
            pointer-events: auto; /* 恢复箭头的点击事件 */
        }

        .arrow:hover {
            background: rgba(0, 0, 0, 0.6);
        }

        /* 主视觉区内容 */
        .hero-content {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            height: 100%;
            z-index: 5;
            padding: 0 20px;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .hero-content p {
            font-size: 1.5rem;
            max-width: 800px;
            margin-bottom: 30px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .btn {
            display: inline-block;
            padding: 15px 30px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            margin: 10px;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: #0066cc;
            color: white;
        }

        .btn-primary:hover {
            background-color: #0052a3;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .btn-secondary {
            background-color: transparent;
            color: white;
            border: 2px solid white;
        }

        .btn-secondary:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-3px);
        }

        /* 核心价值区 */
        .values {
            padding: 100px 50px;
            background-color: #f8f9fa;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 60px;
            color: #003366;
        }

        .values-container {
            display: flex;
            justify-content: space-around;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .value-item {
            flex: 1;
            min-width: 300px;
            text-align: center;
            padding: 30px;
            margin: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .value-item:hover {
            transform: translateY(-10px);
        }

        .value-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #0066cc;
        }

        .value-item h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: #003366;
        }

        .value-item p {
            color: #666;
            font-size: 1.2rem;
            line-height: 1.8;
        }

        /* 数据看板区 */
        .stats {
            padding: 100px 50px;
            background-color: #003366;
            color: white;
            text-align: center;
        }

        .stats-container {
            display: flex;
            justify-content: space-around;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .stat-item {
            flex: 1 1 250px;
            min-width: 200px;
            padding: 30px;
            max-width: 300px;
        }

        .stat-number {
            font-size: 3.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #00ccff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .stat-number-plus {
            font-size: 3.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #00ccff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .stat-label {
            font-size: 1.2rem;
            white-space: nowrap;
        }

        /* 底部行动区 */
        .cta {
            padding: 150px 50px;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            text-align: center;
            color: white;
        }

        .cta h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .cta p {
            font-size: 1.3rem;
            max-width: 800px;
            margin: 0 auto 40px;
        }

        .btn-cta {
            background-color: #0066cc;
            color: white;
            padding: 18px 40px;
            font-size: 1.2rem;
        }

        .btn-cta:hover {
            background-color: #0052a3;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                padding: 15px 20px;
                flex-direction: column;
            }

            .nav-menu {
                margin: 15px 0;
            }

            .hero-content h1 {
                font-size: 2.5rem;
            }

            .hero-content p {
                font-size: 1.2rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .values, .stats, .cta {
                padding: 60px 20px;
            }
            
            .hero-content .btn {
                display: block;
                margin: 10px auto;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="logo">SWKJ</div>
        <ul class="nav-menu">
            <li><a href="index.html" class="active" data-i18n="home" data-i18n-page="navbar">首页</a></li>
            <li><a href="aboutUs.html" data-i18n="about" data-i18n-page="navbar">关于我们</a></li>
            <li><a href="productAndSolution.html" data-i18n="products" data-i18n-page="navbar">产品与解决方案</a></li>
            <li><a href="#" data-i18n="cases" data-i18n-page="navbar">成功案例</a></li>
            <li><a href="#" data-i18n="news" data-i18n-page="navbar">新闻资讯</a></li>
            <li><a href="ContactUs.html" data-i18n="contact" data-i18n-page="navbar">联系我们</a></li>
            <li><a href="languageController.html" class="languagecontroller">语言切换</a></li>
        </ul>
        <div class="language-switch" data-i18n="language">中/En</div>
    </nav>

    <!-- 主视觉区 -->
    <section class="hero">
        <div class="slider-container">
            <!-- 轮播图项 -->
            <div class="slide active">  <!-- 轮播图1 用canvas绘制出星光宇宙动画效果 -->
                <canvas id="dynamicBackground"></canvas>
            </div>
            <!-- 轮播图2 -->
            <div class="slide">
                <div class="parallax-layer parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                <div class="parallax-layer parallax-fg" style="background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
            </div>
            <!-- 轮播图3 -->
            <div class="slide">
                <div class="parallax-layer parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
                <div class="parallax-layer parallax-fg" style="background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
            </div>
        </div>

        <!-- 轮播导航点 -->
        <div class="slider-dots">
            <span class="dot active" data-slide="0"></span>
            <span class="dot" data-slide="1"></span>
            <span class="dot" data-slide="2"></span>
        </div>

        <!-- 轮播箭头 -->
        <div class="slider-arrows">
            <div class="arrow prev">&#10094;</div>
            <div class="arrow next">&#10095;</div>
        </div>

        <!-- 主视觉区内容 -->
        <div class="hero-content">
            <h1 data-i18n="heroTitle" data-i18n-page="index">智联未来，创造价值</h1>
            <p data-i18n="heroDesc" data-i18n-page="index">我们致力于通过创新的技术与解决方案，为全球客户构建更高效、更智能的商业世界。</p>
            <div>
                <a href="#" class="btn btn-primary" data-i18n="heroBtn1" data-i18n-page="index">探索解决方案</a>
                <a href="#" class="btn btn-secondary" data-i18n="heroBtn2" data-i18n-page="index">联系我们</a>
            </div>
        </div>
    </section>

    <!-- 核心价值区 -->
    <section class="values">
        <h2 class="section-title" data-i18n="valuesTitle" data-i18n-page="index">为何选择我们</h2>
        <div class="values-container">
            <div class="value-item">
                <div class="value-icon">🚀</div>
                <h3 data-i18n="value1Title" data-i18n-page="index">创新引领</h3>
                <p data-i18n="value1Desc" data-i18n-page="index">持续投入研发，以尖端科技驱动行业变革。</p>
            </div>
            <div class="value-item">
                <div class="value-icon">💼</div>
                <h3 data-i18n="value2Title" data-i18n-page="index">专业专注</h3>
                <p data-i18n="value2Desc" data-i18n-page="index">深耕行业数十年，深刻理解客户需求与市场趋势。</p>
            </div>
            <div class="value-item">
                <div class="value-icon">🌍</div>
                <h3 data-i18n="value3Title" data-i18n-page="index">全球服务</h3>
                <p data-i18n="value3Desc" data-i18n-page="index">业务遍布五大洲，为客户提供本地化、即时响应的支持。</p>
            </div>
        </div>
    </section>

    <!-- 数据看板区 -->
    <section class="stats">
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-number">150+</div>
                <div class="stat-label">服务全球国家</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">300+</div>
                <div class="stat-label">累计获得专利</div>
            </div>
            <div class="stat-item">
                <div class="stat-number-plus">100E+</div>
                <div class="stat-label">年营业额</div>
            </div>
            <div class="stat-item">
                <div class="stat-number-plus">99%</div>
                <div class="stat-label">客户满意度</div>
            </div>
        </div>
    </section>

    <!-- 底部行动区 -->
    <section class="cta">
        <h2 data-i18n="ctaTitle" data-i18n-page="index">准备好开启下一段卓越旅程了吗？</h2>
        <p data-i18n="ctaDesc" data-i18n-page="index">让我们携手，将挑战转化为机遇。</p>
        <a href="#" class="btn btn-cta">立即洽谈</a>
    </section>

    <script src="js/languageSwitch.js"></script>
    <script>
        // 轮播图功能
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化动态背景
            initDynamicBackground();
            
            let currentSlide = 0;
            const slides = document.querySelectorAll('.slide');
            const dots = document.querySelectorAll('.dot');
            const totalSlides = slides.length;
            let slideInterval;

            // 下一张幻灯片
            function nextSlide() {
                slides[currentSlide].classList.remove('active');
                dots[currentSlide].classList.remove('active');
                
                currentSlide = (currentSlide + 1) % totalSlides;
                
                slides[currentSlide].classList.add('active');
                dots[currentSlide].classList.add('active');
                
                // 重置当前幻灯片的视差效果
                resetParallaxEffect();
            }

            // 上一张幻灯片
            function prevSlide() {
                slides[currentSlide].classList.remove('active');
                dots[currentSlide].classList.remove('active');
                
                currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                
                slides[currentSlide].classList.add('active');
                dots[currentSlide].classList.add('active');
                
                // 重置当前幻灯片的视差效果
                resetParallaxEffect();
            }

            // 跳转到指定幻灯片
            function goToSlide(slideIndex) {
                slides[currentSlide].classList.remove('active');
                dots[currentSlide].classList.remove('active');
                
                currentSlide = slideIndex;
                
                slides[currentSlide].classList.add('active');
                dots[currentSlide].classList.add('active');
                
                // 重置当前幻灯片的视差效果
                resetParallaxEffect();
            }

            // 重置视差效果
            function resetParallaxEffect() {
                const activeSlide = document.querySelector('.slide.active');
                if (activeSlide) {
                    const layers = activeSlide.querySelectorAll('.parallax-layer');
                    layers.forEach(layer => {
                        layer.style.transform = 'translate(0, 0)';
                    });
                }
            }

            // 自动播放
            function startAutoPlay() {
                slideInterval = setInterval(nextSlide, 5000);
            }

            // 暂停自动播放
            function pauseAutoPlay() {
                clearInterval(slideInterval);
            }

            // 绑定箭头事件
            document.querySelector('.arrow.next').addEventListener('click', () => {
                nextSlide();
                pauseAutoPlay();
                startAutoPlay();
            });

            document.querySelector('.arrow.prev').addEventListener('click', () => {
                prevSlide();
                pauseAutoPlay();
                startAutoPlay();
            });

            // 绑定导航点事件
            dots.forEach(dot => {
                dot.addEventListener('click', () => {
                    const slideIndex = parseInt(dot.getAttribute('data-slide'));
                    goToSlide(slideIndex);
                    pauseAutoPlay();
                    startAutoPlay();
                });
            });

            // 鼠标悬停时暂停自动播放
            const heroSection = document.querySelector('.hero');
            heroSection.addEventListener('mouseenter', pauseAutoPlay);
            heroSection.addEventListener('mouseleave', startAutoPlay);
            
            // 添加鼠标视差效果
            initParallaxEffect(heroSection);

            // 简单的数字滚动动画
            const statNumbers = document.querySelectorAll('.stat-number, .stat-number-plus');
            
            statNumbers.forEach(stat => {
                const targetText = stat.innerText;
                const target = parseInt(targetText);
                if (isNaN(target)) return; // 如果不是数字，跳过动画
                
                let count = 0;
                const duration = 2000; // 动画持续时间（毫秒）
                const increment = target / (duration / 16); // 每帧增加的数量
                
                const timer = setInterval(() => {
                    count += increment;
                    if (count >= target) {
                        clearInterval(timer);
                        stat.innerText = targetText; // 保持原始值
                    } else {
                        const value = Math.ceil(count) + (targetText.includes('+') ? '+' : '') + (targetText.includes('亿') ? '亿' : '');
                        stat.innerText = value;
                    }
                }, 16); // 约每秒60帧
            });
            
            // 启动自动播放
            startAutoPlay();
        });
        
        // 动态背景实现
        function initDynamicBackground() {
            const canvas = document.getElementById('dynamicBackground');
            const ctx = canvas.getContext('2d');
            
            // 设置canvas尺寸
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            // 初始化尺寸
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 粒子系统（模拟宇宙银河星星）
            const particles = [];
            const particleCount = 365; // 增加粒子数量以模拟银河效果
            
            // 创建粒子
            for (let i = 0; i < particleCount; i++) {
                particles.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    radius: Math.random() * 2 + 0.5, // 更小的粒子半径
                    // 星星闪烁速度
                    twinkleSpeed: 0.001 + Math.random() * 0.005,
                    // 粒子的相位，用于创建不同的明暗变化
                    phase: Math.random() * Math.PI * 2,
                    // 星星的基础亮度
                    baseBrightness: 0.3 + Math.random() * 0.7,
                    // 星星的颜色（白蓝色调）
                    color: Math.random() > 0.8 ? 'blue' : 'white'
                });
            }
            
            // 创建流动光线
            const beams = [];
            for (let i = 0; i < 20; i++) { // 增加光线数量
                beams.push({
                    angle: Math.random() * Math.PI * 2,
                    speed: 0.0005 + Math.random() * 0.002,
                    length: 0.4 + Math.random() * 0.6,
                    width: 1 + Math.random() * 6, // 改到1-7像素的光线宽度
                    opacity: 0.3 + Math.random() * 0.4, // 增加不透明度使细光线更明显
                    // 太阳自然光色调范围 (暖黄色到橙红色)
                    hue: 30 + Math.random() * 30 // 30-60度，对应橙黄色
                });
            }
            
            // 绘制背景渐变
            function drawBackground(time) {
                // 创建复杂的渐变背景
                const gradient = ctx.createRadialGradient(
                    canvas.width / 2, canvas.height / 2, 0,
                    canvas.width / 2, canvas.height / 2, Math.max(canvas.width, canvas.height) / 1.5
                );
                
                // 加强明暗变化
                const brightness = 0.5 + Math.sin(time * 0.0005) * 0.9; // 0.0 to 1.0
                
                // 深空蓝紫色调
                const r = Math.floor(5 * brightness);
                const g = Math.floor(10 * brightness);
                const b = Math.floor((20 + Math.sin(time * 0.0003) * 10) * brightness);
                
                gradient.addColorStop(0, `rgba(${r + 20}, ${g + 10}, ${b + 40}, 1.0)`);
                gradient.addColorStop(0.5, `rgba(${Math.floor(r * 0.7)}, ${Math.floor(g * 0.5)}, ${Math.floor(b * 0.8)}, 0.8)`);
                gradient.addColorStop(1, `rgba(${Math.floor(r * 0.3)}, ${Math.floor(g * 0.2)}, ${Math.floor(b * 0.5)}, 0.6)`);
                
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 添加星空背景点
                ctx.fillStyle = `rgba(255, 255, 255, ${0.2 * brightness})`;
                for (let i = 0; i < 100; i++) {
                    const x = (i * 137.5) % canvas.width;
                    const y = (i * 73.3) % canvas.height;
                    const size = Math.sin(time * 0.001 + i) * 0.5 + 1.5;
                    ctx.beginPath();
                    ctx.arc(x, y, size, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            // 绘制流动光线
            function drawBeams(time) {
                beams.forEach(beam => {
                    beam.angle += beam.speed;
                    
                    const centerX = canvas.width / 2;
                    const centerY = canvas.height / 2;
                    
                    const startX = centerX + Math.cos(beam.angle) * canvas.width / 3;
                    const startY = centerY + Math.sin(beam.angle) * canvas.height / 3;
                    
                    const endX = centerX + Math.cos(beam.angle + Math.PI) * canvas.width / 3 * beam.length;
                    const endY = centerY + Math.sin(beam.angle + Math.PI) * canvas.height / 3 * beam.length;
                    
                    const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
                    
                    // 更强烈的明暗变化
                    const beamBrightness = 0.2 + Math.sin(time * 0.001 + beam.angle) * 0.8;
                    
                    // 模拟太阳自然光的颜色
                    // 暖黄色到橙红色 (RGB: 255,255,200 到 255,100,0)
                    const intensity = 0.7 + Math.sin(time * 0.0005 + beam.hue) * 0.3;
                    const r = Math.floor(255 * intensity);
                    const g = Math.floor((200 + Math.sin(beam.hue * Math.PI / 180) * 55) * intensity);
                    const b = Math.floor((100 - Math.sin(beam.hue * Math.PI / 180) * 100) * intensity);
                    
                    gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
                    gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${beam.opacity * beamBrightness})`);
                    gradient.addColorStop(1, `rgba(${Math.floor(r*0.8)}, ${Math.floor(g*0.8)}, ${Math.floor(b*0.8)}, 0)`);
                    
                    ctx.beginPath();
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(endX, endY);
                    ctx.strokeStyle = gradient;
                    ctx.lineWidth = beam.width;
                    ctx.shadowColor = `rgba(${r}, ${g}, ${b}, ${beam.opacity * 0.7})`;
                    ctx.shadowBlur = 10;
                    ctx.stroke();
                    ctx.shadowBlur = 0; // 重置阴影，避免影响其他元素
                });
            }
            
            // 绘制粒子（模拟宇宙银河星星）
            function drawParticles(time) {
                particles.forEach(particle => {
                    // 星星的闪烁效果
                    const twinkle = Math.sin(time * particle.twinkleSpeed + particle.phase) * 0.5 + 0.5;
                    const brightness = particle.baseBrightness * twinkle;
                    
                    // 绘制粒子
                    ctx.beginPath();
                    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
                    
                    // 根据颜色类型设置星星颜色
                    if (particle.color === 'blue') {
                        ctx.fillStyle = `rgba(150, 200, 255, ${brightness})`; // 蓝色星星
                    } else {
                        ctx.fillStyle = `rgba(255, 255, 255, ${brightness})`; // 白色星星
                    }
                    
                    ctx.fill();
                    
                    // 为亮星星添加光晕效果
                    if (brightness > 0.7) {
                        ctx.beginPath();
                        ctx.arc(particle.x, particle.y, particle.radius * 3, 0, Math.PI * 2);
                        const gradient = ctx.createRadialGradient(
                            particle.x, particle.y, 0,
                            particle.x, particle.y, particle.radius * 3
                        );
                        
                        if (particle.color === 'blue') {
                            gradient.addColorStop(0, `rgba(150, 200, 255, ${brightness * 0.3})`);
                            gradient.addColorStop(1, 'rgba(150, 200, 255, 0)');
                        } else {
                            gradient.addColorStop(0, `rgba(255, 255, 255, ${brightness * 0.3})`);
                            gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
                        }
                        
                        ctx.fillStyle = gradient;
                        ctx.fill();
                    }
                });
            }
            
            // 动画循环
            function animate() {
                const time = Date.now();
                
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制背景
                drawBackground(time);
                
                // 绘制流动光线
                drawBeams(time);
                
                // 绘制粒子
                drawParticles(time);
                
                // 继续动画循环
                requestAnimationFrame(animate);
            }
            
            // 开始动画
            animate();
        }
        
        // 鼠标视差效果实现
        function initParallaxEffect(container) {
            // 为每个幻灯片添加鼠标移动监听
            container.addEventListener('mousemove', (e) => {
                const rect = container.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                // 计算鼠标位置相对于中心的偏移
                const offsetX = (x - rect.width / 2) / rect.width;
                const offsetY = (y - rect.height / 2) / rect.height;
                
                // 获取当前活动的幻灯片
                const activeSlide = document.querySelector('.slide.active');
                
                // 只对活动幻灯片应用视差效果
                if (activeSlide) {
                    const layers = activeSlide.querySelectorAll('.parallax-layer');
                    layers.forEach((layer, index) => {
                        // 不同图层使用不同的视差强度
                        const parallaxStrength = (index + 1) * 40; // 背景图层移动较少，前景图层移动较多
                        
                        const moveX = offsetX * parallaxStrength;
                        const moveY = offsetY * parallaxStrength;
                        
                        layer.style.transform = `translate(${moveX}px, ${moveY}px)`;
                    });
                }
            });
            
            // 鼠标离开时重置位置
            container.addEventListener('mouseleave', () => {
                const activeSlide = document.querySelector('.slide.active');
                
                if (activeSlide) {
                    const layers = activeSlide.querySelectorAll('.parallax-layer');
                    layers.forEach(layer => {
                        layer.style.transform = 'translate(0, 0)';
                    });
                }
            });
        }
    </script>
</body>
</html>